<template>
  <div>
    <div id="container" class="map-container"></div>
  </div>
</template>

<script>

export default {
  name: 'TencentMap',
  props: ["fatherName"],
  data() {
    return {
      form: {
        lat: '',
        lng: '',
        name: '',
      },
      map: null,
      addressList: [],// 地图搜索返回数据集
      keyword: '',// 地图搜索输入值
      ipAddress: {}, // 根据IP获取当前位置信息
      /* val: {
         location: {
           lat: 34.28851,
           lng: 117.18559,
         }
       }*/
    };
  },
  mounted() {
    this.initMap(this.fatherName);
  },
  methods: {
    // 初始化地图组件
    initMap(val) {
      let that = this;
      // 动态绑定中心点的经纬度
      let lat = val.location.lat;
      let lng = val.location.lng;
      //赋值
      this.$emit('update-coordinates', {
        lat: lat,//纬度
        lng: lng,//经度
      });
      if (this.map) this.map.destroy(); // 销毁旧地图实例
      const center = new TMap.LatLng(lat, lng);
      let map = new TMap.Map('container', {
        center: center,
        zoom: 17.2
      });
      this.map = map
      var markerLayer = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        geometries: [{
          position: {
            lat: lat, lng: lng, height: 0
          }
        }]
      });

      //监听点击事件添加marker
      map.on("click", (evt) => {
        let lat;
        let lng;
        //添加一个marker
        if (markerLayer.geometries.length > 0) {
          var id = markerLayer.geometries[0].id;
          // 移除为该id的点标记
          markerLayer.remove(id);
        }
        markerLayer.add({
          position: evt.latLng
        });
        //把你在图层上标记的点的经纬度存起来，需要的话把它显示在页面上
        lat = evt.latLng.getLat().toFixed(6);
        lng = evt.latLng.getLng().toFixed(6);
        //向页面传递参数
        this.$emit('update-coordinates', {
          lat: lat,//纬度
          lng: lng,//经度
        });
        /*this.form.lat = lat;
        this.form.lng = lng;*/
      });
    },
    /*initMap() {
      // 初始化地图
      this.map = new TMap.Map('container', {
        center: this.center,
        zoom: this.zoom
      });

      // 创建标记图层
      this.markerLayer = new TMap.MultiMarker({
        id: 'marker-layer',
        map: this.map,
        geometries: []
      });

      // 绑定点击事件
      this.map.on("click", (evt) => {
        console.log('evt', evt)
        const lat = evt.latLng.getLat().toFixed(6);
        const lng = evt.latLng.getLng().toFixed(6);
        const latLng = `${lat},${lng}`;
        this.$emit('update-coordinates', {
          lat: lat,//纬度
          lng: lng,//经度
        });
        if (this.markerLayer.geometries.length === 0) {
          this.markerLayer.add({
            position: evt.latLng
          });
          this.$emit('lat_lng', latLng);
        } else {
          const id = this.markerLayer.geometries[0].id;
          this.markerLayer.remove(id);
          this.markerLayer.add({
            position: evt.latLng
          });
          this.$emit('lat_lng', latLng);
        }
      });
    },*/
    clearMarker() {
      if (this.markerLayer && this.markerLayer.geometries.length > 0) {
        const id = this.markerLayer.geometries[0].id;
        this.markerLayer.remove(id);
      }
    },
    // 位置模糊搜索
    remoteMethod2(query) {
      if (query != '') {
        this.getAddress(query);
      } else {
        this.addressList = [];
      }
    },
    getAddress(query) {
      let that = this
      this.$jsonp("https://apis.map.qq.com/ws/place/v1/suggestion/", {
        key: 'DMFBZ-MDC6Q-IRV5V-2XVI2-NQDQV-OOFUU',
        keyword: query,
        region: '徐州',
        output: 'jsonp',
      }).then(res => {
        this.addressList = res.data
      }).catch(err => {
        console.log("catch", err);
      });
    },
    // 地址选择
    onChange2(val) {
      if (!val.location) return; // 数据异常时跳过
      // 更新地图中心点
      this.initMap(val)
    },
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  height: 300px;
  width: 100%;
  margin-bottom: 10px;

  .info-card {
    position: relative;
    padding: 15px 25px;
    background-color: #fff;
    border-radius: 30px;
    font-size: 22px;
    color: #19193e;

    &::after {
      content: '';
      border-width: 15px;
      position: absolute;
      left: 50%;
      bottom: -50%;
      border-style: solid dashed dashed;
      border-color: #fff transparent transparent transparent;
    }
  }
}
</style>
